<template>
  <div>
    <div class="tuwen_box">
      <el-form label-width="120px">
         <el-form-item label="模块名称">
          <el-input
            type="text"
            style="width: 150px"
            v-model="active_component.propValue.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="表单Key值(请输入英文)">
          <el-input
            type="text"
            style="width: 150px"
            v-model="active_component.propValue.fromKey"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块样式">
          <div class="flex-around jz_box">
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 0 ? 'group_active' : ''
              "
              @click="changetab(0)"
            >
              <div class="jz_style_img_0 jz_style_img"></div>
            </div>
            <div
              class="jz-photo-group"
              :class="
                active_component.propValue.tabIndex == 1 ? 'group_active' : ''
              "
              @click="changetab(1)"
            >
              <div class="jz_style_img_1 jz_style_img"></div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="表单项配置">
          <!-- <div>
                名称：
                  <el-input type="text" style="width:200px" v-model="fromItem.label" ></el-input>
            </div>
               <div>
                文本占位内容：
                  <el-input type="text" style="width:200px" v-model="fromItem.placeholder" ></el-input>
            </div>
                <el-radio-group v-model="fromItem.radio1">
                    <el-radio :label="1">基础文本框</el-radio>
                    <el-radio :label="2">富文本框</el-radio>
                </el-radio-group>
                <div>
                <el-switch
                    v-model="fromItem.rule"
                    active-text="必填"
                    inactive-text="不必填">
                    </el-switch>
                </div> -->
        </el-form-item>
        <el-form-item label="表单项">
          <el-button type="primary" size="mini" @click="addFromItem"
            >新增</el-button
          >
          <el-table :data="active_component.propValue.fromData" style="width: 100%">
          <el-table-column prop="label" label="icon">
              <template slot-scope="scope">
                  <img v-if="scope.row.icon" :src="scope.row.icon" style="width:40px;" alt="">
                  <Upload :type="'primary'" :text="'上传'" @confrim="(e)=>{confrim(e,scope.$index)}"></Upload>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.label"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="表单Key">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="placeholder" label="占位内容">
              <template slot-scope="scope">
                <el-input v-model="scope.row.placeholder"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="rule" label="添加规则">
              <template slot-scope="scope">
                 <el-select v-model="scope.row.rule" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="rule" label="类型">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.radio"
                  active-text="文本"
                  inactive-text="富文本"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteFrom(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload },
  data() {
    return {
      name: "",
      tabIndex: 0,
      fromItem: {
        placeholder: "请输入内容",
        icon:'',
        radio: true,
        label: "名称",
        rule: 'Notempty',
      },
      options:[
        {value:'validatePhoneReg',label:'手机号'},
        {value:'Notempty',label:'不为空'},
        {value:'validateEmail',label:'邮箱'},
        {value:'',label:'不限制'},
      ],
    //   from: [
    //     {
    //       placeholder: "请输入内容",
    //       radio1: true,
    //       label: "名称",
    //       rule: true,
    //     },
    //   ],
      active_component: {},
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {
    if (this.activeCompont) {
      this.active_component = this.activeCompont;
    } else {
      for (let key in this.componentList) {
        if (
          this.componentList[key].isDialog &&
          this.componentList[key].propValue.value == this.componentId
        ) {
          this.active_component = JSON.parse(
            JSON.stringify(this.componentList[key])
          );
        }
      }
    }
  },

  methods: {
    addFromItem() {
     this.active_component.propValue.fromData.push(JSON.parse(JSON.stringify(this.fromItem)));
    },
    deleteFrom(i) {
      this.active_component.propValue.fromData.splice(i, 1);
    },
    deleteItem(i) {
      this.active_component.propValue.footerList.splice(i, 1);
    },
    addItem() {
      this.active_component.propValue.footerList.push({
        name: "导航名称",
        link: "./index.html",
      });
    },
    onremove() {
      this.active_component.propValue.img = "";
    },
    loadSuccess(res) {
      this.active_component.propValue.img = res.data;
    },
    confrim(e,i) {
      this.active_component.propValue.fromData[i].icon = e;
    },
    closeTK() {
      this.$emit("closeTK");
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
   

      if (this.activeCompont) {
        //  this.$store.commit('setComponentData',this.$store.state.componentData)
        this.$emit("closeTK"); //关闭弹框
      } else {
       if(!this.active_component.propValue.fromKey){
          this.$message.error('表单key为必填项！')
          return
        }
        
        let fromKeyList=JSON.parse(localStorage.getItem('fromKeyList'))?JSON.parse(localStorage.getItem('fromKeyList')):[] 
        if(fromKeyList.includes(this.active_component.propValue.fromKey)){
            this.$message.error('表单key已存在')
            return
        }else{
          fromKeyList.push(this.active_component.propValue.fromKey)
          localStorage.setItem('fromKeyList',JSON.stringify(fromKeyList))
        }



        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
        component.style.top = 750;
        component.style.left = 30;

        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }

      //     }
      //   }
    },
  },
};
</script>
<style lang="scss" scoped>
.jz_box {
  width: 320px;
}
.jz_style_img {
  display: block;
  width: 115px;
  height: 97px;
  background: url("../../assets/iconfont/mbg02.png") no-repeat;
  border: 1px solid #e7e7eb;
  border-radius: 2px;
}
.jz_style_img_0 {
  background-position: -1434px -66px;
}
.jz_style_img_1 {
  background-position: -1302px -66px;
}
.group_active {
  border: 1px solid #5874d8 !important;
  position: relative;
}
.group_active::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 24px;
  background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
</style>

